<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css">
</head>

<body>
<div id="app">
<!-- 由于 在layout.html 页面中设置了 <iframe> 标签 所以这边只需要 编写数据 就行，
        所以 直接从<el-table> </el-table> 以及 <script> </script> 标签中的数据开始拷贝  不需要考虑页面布局-->
    <!--  这里添加  stripe 表示 样式 -->
            <!-- :data="tableData" 表示：  将得到的 tableData 数据，绑定给我的 data数据   由此起到  上下关联的作用 -->
    <el-table
            :data="tableData"
            stripe
            style="width: 100%">  <!-- 这里声明一个 :data = "tableData"
                                         ：data         表示： 绑定我的数据；
                                         ="tableData"  表示： 将绑定的数据 赋值给 data      -->
        <el-table-column
                prop="date"
                label="日期"
                width="180">   <!--  这里的 data/name/address
                              表示： 在 data(){   tableData: [{ date:  name: address: }]   } 中
                                               对应tableData 集合中的 key
                              然后 通过 <el-table-column> 标签 循环遍历 得到 value -->
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>

 <!--                  Dialog 对话框                -->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
                <!--   这里 再methods 中声明一个方法 this.dialogVisible = true ，表单窗口就隐藏了-->
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>

<!--                            Form 表单                           -->
        <!--     表单校验    -->
                <!--        表单数据提交        -->

<!--    添加一个 编辑/删除的按钮     -->
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">  <!--  -->
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">查看</el-button>
                             <!--  点击事件中 scope.row 表示一个范围 需要加上，否则Vue渲染失败-->
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


<!--                            Pagination 分页                 -->
    <!-- 添加一个 <div>  增加 align="center" 属性 居中  将代码放进去  -->
        <!--  在分页栏的  <el-pagination>  标签中 添加 @current-change  表示点击事件 -->

            <!-- @current-change="currentchange"  ： 表示： 添加一个点击事件，绑定 currentchange 函数-->
    <div align="center">
        <el-pagination

                @current-change="currentchange"
                :page-size="5"
                :pager-count="10"
                layout="prev, pager, next"
                :total="1000">
        </el-pagination>


    </div>

</div>
<script>
    var  vue=new Vue({
        el:"#app",
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        /* created: 创建的意思，表示页面加载时 就创建里面的内容   */
        created(){

        },
        /*  methods ： 表示添加函数 */

                 /*     MessageBox 弹框-确认消息  */
        methods:{
            //分页的点击事件，时间名：currentchange 已经在  @current-change="currentchange" 声明过了
            currentchange(page){
                alert(page)
            },
            handleDelete() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

        }
    })
</script>
</body>
</html>